---
sidebar_position: 6
---

import BrowserWindow from '@site/src/theme/BrowserWindow';

# Code Element

This features provides a convinient way to map a fenced code region to a custom MDX element.
In this example, we map `cow` to rendering element `Cow`.

```tsx title="./src/theme/Cow/index.tsx"
import React from 'react';

export default function Cow(props: { lang: string; meta: object; value: string }) {
  const { value } = props;
  return <pre>cow says: {value}</pre>;
}
```

So that this code section gets replaced with the MDX code using `Dot`.

````markdown
```cow
Boo!
```
````

<BrowserWindow>

```cow
Boo!
```

</BrowserWindow>

## Configuration

Add a `codeElement` section in the rise4fun config and map the `lang` identifier to the theme MDX element name.

```js title="./docusaurus.config.js"
const config = configure({ ... }, {
    ...
    // highlight-start
    codeElement: {
        langs: [
            {
                lang: "cow",
                element: "Cow"
            }
        ]
    },
    // highlight-end
})
```
